<template>
  <a-card class="card mr-5" :class="{ 'card-select': selected }">
    <corner-mark v-show="selected">已选择</corner-mark>
    <div class="flex justify-between items-center">
      <p class="card-title mb-0">
        <slot name="title"></slot>
      </p>
    </div>
    <div class="card-content">
      <slot name="content"></slot>
    </div>
    <template #actions>
      <div class="red font-bold select-none hover-red" @click="emit('on-click')">
        <span v-if="selected">已选择</span>
        <span v-else>点击选择</span>
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
import CornerMark from '@/components/corner-mark/index.vue'

interface Props {
  selected?: boolean
}

interface Emits {
  (e: 'on-click'): void
}

withDefaults(defineProps<Props>(), {
  selected: false
})

const emit = defineEmits<Emits>()
</script>

<script lang="ts">
export default {
  name: 'BwVersionCard'
}
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  width: 272px;
  border: 1.5px solid #ffd0d0;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 15px;
  }

  ::v-deep(.ant-card-actions) {
    transition: all 0.2s ease;
    border-top: 1.5px solid #ffd0d0;
  }

  ::v-deep(.ant-card-actions > li:not(:last-child)) {
    border-right: 1.5px solid #ffd0d0;
  }

  .red {
    color: #ff6350;
  }

  .hover-red {
    &:hover {
      color: red;
    }
  }
}

.card-select {
  background: #ff4d4f;

  .card-title {
    color: #fff;
  }

  .card-content {
    color: #fff;
  }

  .red {
    color: #fff;
  }

  ::v-deep(.ant-card-actions) {
    background: #ff4d4f;
  }

  .hover-red {
    &:hover {
      color: #fff;
    }
  }
}

.card-title {
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
  color: #ff4d4f;
}

.card-content {
  font-size: 13px;
  color: #666;
  margin-top: 15px;
  height: 40px;
  font-weight: bold;
}
</style>
